<template>
    <div>
        <h2>G6 网格布局示例</h2>
        <div ref="container" style="width:100%;height:800px;background:#f5f5f5;"></div>
    </div>
</template>
<script setup lang="ts">
defineOptions({ name: 'AntvG6Demo10' });
import { ref, onMounted } from 'vue';
import * as G6 from '@antv/g6';
const container = ref();
onMounted(() => {
    const graph = new G6.Graph({
        container: container.value,
        width: 900,
        height: 400,
        layout: { type: 'grid' },
        data: {
            nodes: [
                { id: 'node1', label: '节点1' },
                { id: 'node2', label: '节点2' },
                { id: 'node3', label: '节点3' },
                { id: 'node4', label: '节点4' },
                { id: 'node5', label: '节点5' },
                { id: 'node6', label: '节点6' }
            ],
            edges: [
                { source: 'node1', target: 'node2' },
                { source: 'node2', target: 'node3' },
                { source: 'node3', target: 'node4' },
                { source: 'node4', target: 'node5' },
                { source: 'node5', target: 'node6' }
            ]
        },
        behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node']
    });
    graph.render();
});
</script> 